<template>
	<view class="articaldetail">
		<view class="articaldetail-title">{{articalDetail.title}}</view>
		<view class="articaldetail-author">作者:{{articalDetail.author}}</view>
		<view class="articaldetail-time">时间:{{articalDetail.createTime}}</view>
		<view class="articaldetail-summary">{{articalDetail.summary}}</view>
		<image class="articaldetail-img" :src="articalDetail.coverImg" ></image>
		<mp-html class="articaldetail-html" :content="articalDetail.content1" />
		<mp-html  class="articaldetail-html" :content="articalDetail.content2" />
	</view>
</template>

<script>
	import {
	productArticle as productArticleApi
	} from '../../../api/find/index.js'
	export default {
		name:'ArticalDetail',
		data() {
			return {
				articalId:'',
				articalDetail:{},
				style:{
					
				}
			}
		},
		onLoad(config){
			this.articalId=config.articalId;
			this.getArticalDetail(this.articalId);
		},
		methods: {
			//获取文章详情页面
			getArticalDetail(id){
					productArticleApi(id)
					.then(res=>{
						console.log('获取文章详情',res);
						this.articalDetail=res.data.productArticle;
						uni.setNavigationBarTitle({
							title:this.articalDetail.title
						})
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.articaldetail{
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 30rpx 60rpx 60rpx;
		min-height: 100vh;
		background-color: #f1ece7;
		&-title{
			font-size: 50rpx;
			font-weight: 700;
		}
		&-author,&-time{
			text-align: right;
		}
		&-summary{
			color:#000000;
			font-size: 32rpx;
			word-spacing: 10rpx;
		}
		&-img{
			margin:20rpx auto;
		}
		::v-deep &-html{
			letter-spacing: 2rpx;
			p{
				margin-bottom: 15rpx;
			}
		}
	}

</style>
